<template>
	<view class="bg">
		<xl-navbar title="Switch开关选择" fixed shadow></xl-navbar>
		<view class="content">
			<view class="title">基础样式: false/true</view>
			<xl-switch></xl-switch>
			
			<view class="title">设置开关值：open/close</view>
			<xl-switch v-model="open" activeValue="open" inactiveValue="close" @change="change"></xl-switch>
			
			<view class="title">自定义颜色</view>
			<xl-switch activeColor="#f56c6c" inactiveColor="#f1f1f1"></xl-switch>
			
			<view class="title">设置大小、禁用</view>
			<xl-switch :size="30" disabled inactiveColor="#efefef"></xl-switch>
			
			<view class="title">切换前处理</view>
			<xl-switch :handleChange="handleChange2"></xl-switch>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const open = ref('open')
	
	function change(value){
		console.log(value);
	}
	
	// 直接处理切换
	function handleChange1(value){
		console.log("切换至：" + value);
		uni.$xl.toast("使用处理后结果")
		return true;
	}
	
	// 请求后端切换
	async function handleChange2(value){
		console.log("切换至：" + value);
		return await uni.$xl.apis.test().then(()=>{
			uni.$xl.toast("返回处理后结果")
			return false
		})
	}
</script>
